<template>
  <div class="search">

    <div class="topbar">
      <div class="left" @click="back">
        <img src="../../assets/img/common/back.svg" alt="">
      </div>
      <div class="center">
        <input type="text" placeholder="一首好歌愉悦心情">
      </div>
      <div class="right" @click="goSinger">
        <img src="../../assets/img/common/singer.svg" alt="">
      </div>
    </div>

    <div class="search-item">
      <ul class="box">
        <li class="li-item" v-for="(item,index) in list"
            :key="index" @click="choose(item.id,index)">
          <div class="box-num">
            <p>{{index+1}}</p>
          </div>
          <div class="rightbox">
            <div class="right-top" style="width: 100px">
              <p>{{item.searchWord}}</p>
              <div class="imagebox" v-if="item.iconUrl">
                <img :src="item.iconUrl" alt="" @click="goSinger">
              </div>
            </div>
            <div class="right-bottom">
              <p>{{item.content}}</p>
            </div>
          </div>
          <div class="score">
            <p class="scorep">{{item.score}}</p>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import {getHotDetail,getSong} from "../../network/search";
  import {getSongSheet} from "../../network/songsheet";

export default {
        name: "Search",
    components:{

    },
    data(){
      return{
          list:[],
          music:[],
          url:[],
      }      
    },
    created() {
        getHotDetail().then(res=>{
            console.log(res)
            res.data.data.forEach((item,index)=>{
                this.list.push(item)
            })
        })
    },
    methods:{
        back(){
            this.$router.push('/find');
        },
        goSinger(){
            this.$router.push('singerClass')
        },
        choose(id,index){
              getSong(this.list[index].searchWord).then(res=>{
                  // console.log(res.data.result.songs)
                  this.music = res.data.result.songs
              })
        },


    },

    
}
</script>

<style scoped>
  .search{
    width: 100%;
    position: relative;
    /*top: -34px;*/
  }

  .topbar{
    position: fixed;
    background-color: white;
    top: 0px;
    z-index: 11;
    width: 100%;
    height: 44px;
    text-align: center;
  }

  .left{
    position: absolute;
    left: 0;
    width: 20%;
    height: 44px;
  }

  .left img{
    width: 25px;
    height: 25px;
    transform: translateY(50%);
  }

  .center{
    position: absolute;
    left: 20%;
    width: 60%;
    height: 44px;
  }

  .center input{
    width: 99%;
    transform: translateY(70%);
    border: none;
    border-bottom: 2px solid #DB2C1F;
    outline: none;
  }

  .right{
    position: absolute;
    left: 80%;
    width: 20%;
    height: 44px;
  }

  .right img{
    width: 25px;
    height: 25px;
    transform: translateY(50%);
  }

  .search-item{
    width: 100%;
    padding-top: 44px;
    /*background-color: yellow;*/
    position: relative;
    top: 0px;
  }

  .box{
    width: 100%;
    display: block;
  }

  .li-item{
    width: 100%;
    height: 60px;
    margin-bottom: 2px;
    background-color: #f5f5f5;
    display: flex;
  }

  .box-num{
    color: #D6D8D6;
    font-size: 12px;
    margin-left: 12px;
    margin-right: 12px;
    width: 15px;
    text-align: center;
    margin-top: 4px;
  }

  .box-num p{
    font-size: 15px;
    margin-top: 10px;
  }

  .rightbox{
    width: 70%;
    position: relative;
    margin-top: 10px;
  }

  .right-top{
    width: 100%;
    font-size: 12px;
  }

  .right-top p{
    font-size: 14px;
    position: absolute;
    left: 0px;
    /*color: #1E1E24;*/
  }

  .imagebox{
    position: absolute;
    left: 70%;
  }

  .imagebox img{
    height: 15px;
    margin-left: 20px;
    display: inline;
  }

  .right-bottom{
    position: absolute;
    top: 20px;
    font-size: 9px;
    font-weight: normal;
    margin-top: 6px;
  }

  .right-bottom p{

  }

  li:nth-child(-n+3) .box-num{
    color: #F7A5A6
  }

  li:nth-child(-n+3) .rightbox{
    color: red;
    font-weight: 800;
  }

  .score{
    flex: 1;
    margin-right: 10px;
    margin-top: 10px;
    font-size: 10px;
    font-weight: normal;
  }

  .scorep{

  }


</style>